<template>
  <el-main class="bg edit_wrap comtable_e">
    <el-form ref="form" :model="form" status-icon label-width="120px" v-if="is_view()">
      <el-row class="row_ce">
        <el-col
            v-if="$check_field('get','business_user') || $check_field('add','business_user') || $check_field('set','business_user')"
            :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="商家用户" prop="business_user">
            <div v-if="user_group !== '管理员'">
              {{ get_user_session_business_user(form['business_user']) }}
              <el-select
                  v-if="(form['room_cleaning_id'] && $check_field('set','business_user')) || (!form['room_cleaning_id'] && $check_field('add','business_user'))"
                  id="business_user" v-model="form['business_user']"
                  :disabled="disabledObj['business_user_isDisabled']">
                <el-option v-for="o in list_user_business_user" :key="o['username']"
                           :label="o['nickname'] + '-' + o['username']"
                           :value="o['user_id']">
                </el-option>
              </el-select>
              <el-select v-else-if="$check_field('get','business_user')" id="business_user"
                         v-model="form['business_user']" :disabled="true">
                <el-option v-for="o in list_user_business_user" :key="o['username']"
                           :label="o['nickname'] + '-' + o['username']"
                           :value="o['user_id']">
                </el-option>
              </el-select>
            </div>
            <el-select v-else id="business_user" v-model="form['business_user']"
                       :disabled="disabledObj['business_user_isDisabled']">
              <el-option v-for="o in list_user_business_user" :key="o['username']"
                         :label="o['nickname'] + '-' + o['username']"
                         :value="o['user_id']">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
            v-if="$check_field('get','name_of_homestay') || $check_field('add','name_of_homestay') || $check_field('set','name_of_homestay')"
            :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="民宿名称" prop="name_of_homestay">
            <el-input id="name_of_homestay" v-model="form['name_of_homestay']" placeholder="请输入民宿名称"
                      v-if="(form['room_cleaning_id'] && $check_field('set','name_of_homestay')) || (!form['room_cleaning_id'] && $check_field('add','name_of_homestay'))"
                      :disabled="disabledObj['name_of_homestay_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','name_of_homestay')">{{ form['name_of_homestay'] }}</div>
          </el-form-item>
        </el-col>
        <el-col
            v-if="$check_field('get','location_of_homestay') || $check_field('add','location_of_homestay') || $check_field('set','location_of_homestay')"
            :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="民宿位置" prop="location_of_homestay">
            <el-input id="location_of_homestay" v-model="form['location_of_homestay']" placeholder="请输入民宿位置"
                      v-if="(form['room_cleaning_id'] && $check_field('set','location_of_homestay')) || (!form['room_cleaning_id'] && $check_field('add','location_of_homestay'))"
                      :disabled="disabledObj['location_of_homestay_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','location_of_homestay')">{{ form['location_of_homestay'] }}</div>
          </el-form-item>
        </el-col>
        <el-col
            v-if="$check_field('get','cleaning_the_user') || $check_field('add','cleaning_the_user') || $check_field('set','cleaning_the_user')"
            :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="打扫用户" prop="cleaning_the_user">
            <el-select
                v-if="(form['room_cleaning_id'] && $check_field('set','cleaning_the_user')) || (!form['room_cleaning_id'] && $check_field('add','cleaning_the_user'))"
                id="cleaning_the_user" v-model="form['cleaning_the_user']"
                :disabled="disabledObj['cleaning_the_user_isDisabled']">
              <el-option v-for="o in list_user_cleaning_the_user" :key="o['username']"
                         :label="o['nickname'] + '-' + o['username']"
                         :value="o['user_id']">
              </el-option>
            </el-select>
            <el-select v-else-if="$check_field('get','cleaning_the_user')" id="cleaning_the_user"
                       v-model="form['cleaning_the_user']" :disabled="true">
              <el-option v-for="o in list_user_cleaning_the_user" :key="o['username']"
                         :label="o['nickname'] + '-' + o['username']"
                         :value="o['user_id']">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
            v-if="$check_field('get','cleaning_time') || $check_field('add','cleaning_time') || $check_field('set','cleaning_time')"
            :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="打扫时间" prop="cleaning_time">
            <el-date-picker :disabled="disabledObj['cleaning_time_isDisabled']"
                            v-if="(form['room_cleaning_id'] && $check_field('set','cleaning_time')) || (!form['room_cleaning_id'] && $check_field('add','cleaning_time'))"
                            id="cleaning_time"
                            v-model="form['cleaning_time']" type="date" placeholder="选择日期"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
            <div v-else-if="$check_field('get','cleaning_time')">{{ form['cleaning_time'] }}</div>
          </el-form-item>
        </el-col>
        <el-col
            v-if="$check_field('get','cleaning_remarks') || $check_field('add','cleaning_remarks') || $check_field('set','cleaning_remarks')"
            :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="打扫备注" prop="cleaning_remarks">
            <el-input type="textarea" id="cleaning_remarks" v-model="form['cleaning_remarks']"
                      placeholder="请输入打扫备注"
                      v-if="(form['room_cleaning_id'] && $check_field('set','cleaning_remarks')) || (!form['room_cleaning_id'] && $check_field('add','cleaning_remarks'))"
                      :disabled="disabledObj['cleaning_remarks_isDisabled']"></el-input>
            <div v-else-if="$check_field('get','cleaning_remarks')">{{ form['cleaning_remarks'] }}</div>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
          <el-form-item label="打扫照片" prop="avatar">
            <el-upload class="avatar-uploader" drag accept="image/gif, image/jpeg, image/png, image/jpg"
                       action="" :http-request="uploadroomimg" :show-file-list="false">
              <img v-if="form['id_card_frontend']" :src="$fullUrl(form['id_card_frontend'])" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>


      </el-row>
      <el-col :xs="24" :sm="12" :lg="8" class="el_form_btn_warp">
        <el-form-item
            v-if="$check_action('/room_cleaning/view','set') || $check_action('/room_cleaning/view','add') || $check_option('/room_cleaning/table','examine')">
          <el-button type="primary" @click="submit()">提交</el-button>
          <el-button @click="cancel()">取消</el-button>
        </el-form-item>
        <el-form-item v-else>
          <el-button @click="cancel()">返回</el-button>
        </el-form-item>
      </el-col>

    </el-form>
  </el-main>
</template>

<script>
import mixin from "@/mixins/page.js";

export default {
  mixins: [mixin],
  data() {
    return {
      field: "room_cleaning_id",
      url_add: "~/api/room_cleaning/add?",
      url_set: "~/api/room_cleaning/set?",
      url_get_obj: "~/api/room_cleaning/get_obj?",
      url_upload: "~/api/room_cleaning/upload?",

      query: {
        "room_cleaning_id": 0,
      },

      form: {
        "business_user": 0, // 商家用户
        "name_of_homestay": '', // 民宿名称
        "location_of_homestay": '', // 民宿位置
        "cleaning_the_user": 0, // 打扫用户
        "cleaning_time": '', // 打扫时间
        "cleaning_remarks": '', // 打扫备注
        "room_cleaning_id": 0, // ID
        "img": ''
      },
      disabledObj: {
        "business_user_isDisabled": false,
        "name_of_homestay_isDisabled": false,
        "location_of_homestay_isDisabled": false,
        "cleaning_the_user_isDisabled": false,
        "cleaning_time_isDisabled": false,
        "cleaning_remarks_isDisabled": false,
      },


      // 用户列表
      list_user_business_user: [],
      // 用户组
      group_user_business_user: "",


      // 用户列表
      list_user_cleaning_the_user: [],


    }
  },
  methods: {


    /**
     * 获取商家用户用户列表
     */
    async get_list_user_business_user() {
      var json = await this.$get("~/api/user/get_list?user_group=商家用户");
      if (json.result && json.result.list) {
        this.list_user_business_user = json.result.list;
      } else if (json.error) {
        console.error(json.error);
      }
    },
    /**
     * 获取商家用户用户组
     */
    async get_group_user_business_user() {
      this.form["business_user"] = this.user.user_id;
      var json = await this.$get("~/api/user_group/get_obj?name=商家用户");
      if (json.result && json.result.obj) {
        this.group_user_business_user = json.result.obj;
      } else if (json.error) {
        console.error(json.error);
      }
    },
    get_user_session_business_user(id) {
      var _this = this;
      var user_id = {"user_id": id}
      var url = "~/api/" + _this.group_user_business_user.source_table + "/get_obj?"
      this.$get(url, user_id, function (res) {
        if (res.result && res.result.obj) {
          var arr = []
          for (let key in res.result.obj) {
            arr.push(key)
          }
          var arrForm = []
          for (let key in _this.form) {
            arrForm.push(key)
          }
          _this.form["business_user"] = id
          _this.disabledObj['business_user' + '_isDisabled'] = true
          for (var i = 0; i < arr.length; i++) {
            if (arr[i] !== 'examine_state' && arr[i] !== 'examine_reply') {
              for (var j = 0; j < arrForm.length; j++) {
                if (arr[i] === arrForm[j]) {
                  if (arr[i] !== "business_user") {
                    _this.form[arrForm[j]] = res.result.obj[arr[i]]
                    _this.disabledObj[arrForm[j] + '_isDisabled'] = true
                    break;
                  } else {
                    _this.disabledObj[arrForm[j] + '_isDisabled'] = true
                  }
                }
              }
            }
          }
        }
      });
    },
    get_user_business_user(id) {
      var obj = this.list_user_business_user.getObj({"user_id": id});
      var ret = "";
      if (obj) {
        if (obj.nickname) {
          ret = obj.nickname;
        } else {
          ret = obj.username;
        }
      }
      return ret;
    },


    /**
     * 获取员工用户用户列表
     */
    async get_list_user_cleaning_the_user() {
      var json = await this.$get("~/api/user/get_list?user_group=员工用户");
      if (json.result && json.result.list) {
        this.list_user_cleaning_the_user = json.result.list;
      } else if (json.error) {
        console.error(json.error);
      }
    },
    get_user_cleaning_the_user(id) {
      var obj = this.list_user_cleaning_the_user.getObj({"user_id": id});
      var ret = "";
      if (obj) {
        if (obj.nickname) {
          ret = obj.nickname;
        } else {
          ret = obj.username;
        }
      }
      return ret;
    },


    /**
     * 获取对象之前
     * @param {Object} param
     */
    get_obj_before(param) {
      var form = "";

      if (this.form && form) {
        Object.keys(this.form).forEach(key => {
          Object.keys(form).forEach(dbKey => {
            // if(dbKey === "charging_standard"){
            // 	this.form['charging_rules'] = form[dbKey];
            // 	this.disabledObj['charging_rules_isDisabled'] = true;
            // };
            if (key === dbKey) {
              this.disabledObj[key + '_isDisabled'] = true;
              this.form[key] = form[dbKey]
            }
            if (dbKey === "source_table") {
              this.form['source_table'] = form[dbKey];
            }
            if (dbKey === "source_id") {
              this.form['source_id'] = form[dbKey];
            }
            if (dbKey === "source_user_id") {
              this.form['source_user_id'] = form[dbKey];
            }
          })
        })
      }
      if (this.form["cleaning_time"] && this.form["cleaning_time"].indexOf("-") === -1) {
        this.form["cleaning_time"] = this.$toTime(parseInt(this.form["cleaning_time"]), "yyyy-MM-dd")
      }
      $.db.del("form");

      return param;
    },

    /**
     * 获取对象之后
     * @param {Object} json
     * @param {Object} func
     */
    get_obj_after(json, func) {
      if (this.form["cleaning_time"] == "0000-00-00") {
        this.form["cleaning_time"] = null;
      }
      if (parseInt(this.form["cleaning_time"]) > 9999) {
        this.form["cleaning_time"] = this.$toTime(parseInt(this.form["cleaning_time"]), "yyyy-MM-dd")
      }


    },

    async submit(param, func) {
      if (!param) {
        param = this.form;
      }

      var pm = this.events("submit_before", Object.assign({}, param)) || param;
      var msg = await this.events("submit_check", pm);
      var ret;
      if (msg) {
        this.$toast(msg, 'danger');
      } else {
        ret = this.events("submit_main", pm, func);
      }
      return ret;
    },

    /**
     * 提交前验证事件
     * @param {Object} 请求参数
     * @return {String} 验证成功返回null, 失败返回错误提示
     */
    submit_check(param) {
      if (!param.cleaning_time) {
        return "打扫时间不能为空";
      }
      return null;
    },

    is_view() {
      // var bl = this.user_group == "管理员";
      var bl = false;

      if (!bl) {
        bl = this.$check_action('/room_cleaning/table', 'add');
        console.log(bl ? "你有表格添加权限视作有添加权限" : "你没有表格添加权限");
      }
      if (!bl) {
        bl = this.$check_action('/room_cleaning/table', 'set');
        console.log(bl ? "你有表格添加权限视作有修改权限" : "你没有表格修改权限");
      }
      if (!bl) {
        bl = this.$check_action('/room_cleaning/view', 'add');
        console.log(bl ? "你有视图添加权限视作有添加权限" : "你没有视图添加权限");
      }
      if (!bl) {
        bl = this.$check_action('/room_cleaning/view', 'set');
        console.log(bl ? "你有视图修改权限视作有修改权限" : "你没有视图修改权限");
      }
      if (!bl) {
        bl = this.$check_action('/room_cleaning/view', 'get');
        console.log(bl ? "你有视图查询权限视作有查询权限" : "你没有视图查询权限");
      }

      console.log(bl ? "具有当前页面的查看权，请注意这不代表你有字段的查看权" : "无权查看当前页，请注意即便有字段查询权限没有页面查询权限也不行");

      return bl;
    },
    /**
     * 上传文件
     * @param {Object} param
     */
    uploadimg(param) {
      this.uploadFile(param.file, "avatar");
    },

    uploadroomimg(param) {
      this.uploadFileSub(param.file, "permit");
    },

    // 上传文件方法
    uploadFileSub(file, key) {
      var _this = this;
      var form = new FormData(); // FormData 对象
      form.append('file', file); // 文件对象
      this.$upload(this.url_upload, form, function (json) {
        if (json.result) {
          // 确保图片路径正确赋值到 form 对象中
          _this.form[key] = json.result.url;
          // 强制刷新组件以确保图片能够立即显示
          _this.$forceUpdate();
        } else {
          _this.$toast('上传失败！');
        }
      });
    },

  },
  created() {
    this.get_list_user_business_user();
    this.get_group_user_business_user();
    this.get_list_user_cleaning_the_user();
  },
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.img_multiple {
  overflow: hidden;
}

.img_multiple .img_block {
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  position: relative;
}

.img_multiple .img_block img {
  height: 100px;
  width: auto;
}

.img_multiple .img_del {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: #0000008a;
  color: #fff;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
  cursor: pointer;
}


</style>
